<template>
  <div :class="wrapper">
    <template v-if="type != 'mobile'">
      <el-select v-model="currentProvince" @change="getCities" :disabled="disabled || provinceDisabled" :placeholder="placeholders.province">
        <el-option :value="placeholders.province">{{ placeholders.province }}</el-option>
        <el-option v-for="(item, index) in provinces" :key="index" :label="item" :value="item"></el-option>
      </el-select>
      <template v-if="!onlyProvince">
       <el-select v-model="currentCity" @change="getAreas" :disabled="disabled || cityDisabled" :placeholder="placeholders.city">
        <el-option :value="placeholders.city">{{ placeholders.city }}</el-option>
        <el-option v-for="(item, index) in cities" :key="index" :label="item" :value="item"></el-option>
       </el-select>
       <el-select v-if="!hideArea"  @change="chooseArea" v-model="currentArea" :disabled="disabled || areaDisabled" :placeholder="placeholders.area">
        <el-option :value="placeholders.area">{{ placeholders.area }}</el-option>
        <el-option v-for="(item, index) in areas" :key="index" :label="item" :value="item"></el-option>
       </el-select>
      </template>
    </template>
  </div>
</template>

<script>
import DISTRICTS from "./districts";
const DEFAULT_CODE = 100000;
export default {
  name: "DistrictPicker",
  props: {
    province: { type: [String, Number], default: "" },
    city: { type: [String, Number], default: "" },
    area: { type: [String, Number], default: "" },
    type: { type: String, default: "" },
    hideArea: { type: Boolean, default: false },
    onlyProvince: { type: Boolean, default: false },
    staticPlaceholder: { type: Boolean, default: false },
    placeholders: {
      type: Object,
      default() {
        return {
          province: "省",
          city: "市",
          area: "区"
        };
      }
    },
    disabled: { type: Boolean, default: false },
    provinceDisabled: { type: Boolean, default: false },
    cityDisabled: { type: Boolean, default: false },
    areaDisabled: { type: Boolean, default: false },
    addressHeader: { type: String, default: "address-header" },
    addressContainer: { type: String, default: "address-container" },
    wrapper: { type: String, default: "distpicker-address-wrapper" }
  },
  data() {
    return {
      provinces: [],
      cities: [],
      areas: [],
      currentProvince: this.determineType(this.province) || this.placeholders.province,
      currentCity: this.determineType(this.city) || this.placeholders.city,
      currentArea: this.determineType(this.area) || this.placeholders.area
    };
  },
  created() {
      this.provinces = this.getDistricts();
      this.cities = this.province ? this.getDistricts(this.getAreaCode(this.determineType(this.province))) : [];
      this.areas = this.city? this.getDistricts(this.getAreaCode(this.determineType(this.city), this.area)): []; 
  },
  watch: {
    currentProvince(vaule) {
      this.$emit("province", this.setData(vaule));
      // if (this.onlyProvince) 
      // this.emit("selected");
    },
    currentCity(value) {
      this.$emit("city", this.setData(value, this.currentProvince));
      // if (value != this.placeholders.city && this.hideArea)
        // this.emit("selected");
    },
    currentArea(value) {
      this.$emit("area", this.setData(value, this.currentProvince));
      // this.emit("selected");
    },
    province() {
      this.currentProvince = this.province || this.placeholders.province;
      this.cities = this.determineValue(
        this.currentProvince,
        this.placeholders.province
      );
    },
    city() {
      this.currentCity = this.city || this.placeholders.city;
      this.areas = this.determineValue(
        this.currentCity,
        this.placeholders.city,
        this.currentProvince
      );
    },
    area() {
      this.currentArea = this.area || this.placeholders.area;
    }
  },
  methods: {
    setData(value, check = "") {
      return {
        code: this.getAreaCode(value, check),
        value: value
      };
    },
    emit(name) {
      let data = {
        province: this.setData(this.currentProvince)
      };
      if (!this.onlyProvince) {
        this.$set(data, "city", this.setData(this.currentCity));
      }
      if (!this.onlyProvince || this.hideArea) {
        this.$set(
          data,
          "area",
          this.setData(this.currentArea, this.currentCity)
        );
      }
      this.$emit(name, data);
    },
    getCities() {
      this.currentCity = this.placeholders.city;
      this.currentArea = this.placeholders.area;
      this.cities = this.determineValue(
        this.currentProvince,
        this.placeholders.province
      );
      this.cleanList("areas");
      // if (this.cities.length === 0) {
        this.emit("selected");
      // }
    },
    getAreas() {
      this.currentArea = this.placeholders.area;
      this.areas = this.determineValue(
        this.currentCity,
        this.placeholders.city,
        this.currentProvince
      );
      // if (this.areas.length === 0) {
        this.emit("selected");
      // }
    },
    resetProvince() {
      this.provinces = this.getDistricts();
    },
    resetCity() {
      this.getCities();
    },
    chooseProvince(name) {
      this.currentProvince = name;
      if (this.onlyProvince) return;
      this.showAreaTab = false;
      this.getCities();
    },
    chooseCity(name) {
      this.currentCity = name;
      if (this.hideArea) return;
      this.getAreas();
    },
    chooseArea(name) {
      this.currentArea = name;
       this.emit("selected");
    },
    getAreaCodeByPreCode(name, preCode) {
      let codes = [];
      for (let x in DISTRICTS) {
        for (let y in DISTRICTS[x]) {
          if (name === DISTRICTS[x][y]) {
            codes.push(y);
          }
        }
      }
      if (codes.length > 1) {
        let index;
        codes.forEach((item, i) => {
          if (item.slice(0, 2) == preCode) {
            index = i;
          }
        });
        return codes[index];
      } else {
        return codes[0];
      }
    },
    getAreaCode(name, check = "") {
      for (let x in DISTRICTS) {
        for (let y in DISTRICTS[x]) {
          if (name === DISTRICTS[x][y]) {
            if (check.length > 0) {
              if (
                y.slice(0, 2) !==
                this.getAreaCodeByPreCode(check, y.slice(0, 2)).slice(0, 2)
              ) {
                continue;
              } else {
                return y;
              }
            } else {
              return y;
            }
          }
        }
      }
    },
    getCodeValue(code) {
      for (let x in DISTRICTS) {
        for (let y in DISTRICTS[x]) {
          if (code === parseInt(y)) {
            return DISTRICTS[x][y];
          }
        }
      }
    },
    getDistricts(code = DEFAULT_CODE) {
      return DISTRICTS[code] || [];
    },
    determineValue(currentValue, placeholderValue, check = "") {
      if (currentValue === placeholderValue) {
        return [];
      } else {
        return this.getDistricts(this.getAreaCode(currentValue, check));
      }
    },
    determineType(value) {
      if (typeof value === "number") {
        return this.getCodeValue(value);
      }
      return value;
    },
    cleanList(name) {
      this[name] = [];
    }
  }
};
</script>

<style lang="scss">
.disabled-color {
  background: #f8f8f8;
}
</style>